import React, { ReactNode } from 'react';
import './Card.css';

export interface CardProps {
  children: ReactNode;
  className?: string;
  shadow?: 'none' | 'sm' | 'md' | 'lg';
  border?: boolean;
  rounded?: 'sm' | 'md' | 'lg' | 'xl';
}

const Card: React.FC<CardProps> = ({ 
  children, 
  className = '', 
  shadow = 'md', 
  border = true, 
  rounded = 'lg' 
}) => {
  // 构建卡片类名
  const baseClasses = 'bg-white w-full overflow-hidden';
  const shadowClasses = {
    none: 'shadow-none',
    sm: 'shadow-sm',
    md: 'shadow-md',
    lg: 'shadow-lg',
  };
  const borderClass = border ? 'border border-gray-200' : 'border-none';
  const roundedClasses = {
    sm: 'rounded-md',
    md: 'rounded-lg',
    lg: 'rounded-xl',
    xl: 'rounded-2xl',
  };

  const cardClasses = `${baseClasses} ${shadowClasses[shadow]} ${borderClass} ${roundedClasses[rounded]} ${className}`;

  return <div className={cardClasses}>{children}</div>;
};

export default Card;